<template>
  <div>
    <mt-tabbar v-model="selected">
      <mt-tab-item id="tab1">
        <img slot="icon" src="../assets/agr.png">
        tab1
      </mt-tab-item>
      <mt-tab-item id="tab2">
        <img slot="icon" src="../assets/ami.png">
        tab2
      </mt-tab-item>
      <mt-tab-item id="tab3">
        <img slot="icon" src="../assets/agf.png">
        tab3
      </mt-tab-item>
      <mt-tab-item id="tab4">
        <img slot="icon" src="../assets/amq.png">
        tab4
      </mt-tab-item>
    </mt-tabbar>
  </div>
</template>

<script>
export default {
  name: 'tabtest',
  data () {
    return {
      selected: 'tab1'
    }
  },
  watch: {
    selected: function (val, oldVal) {
      console.log(val)
    }
  }
}
</script>

<style scoped>

</style>
